<template>
  <div class="_wz_cent_main _wz_vehicleQueryUbiSee">
    <Form ref="formAdd" :model="formData" label-position="right" :label-width="90">
      <div>
        <div style="line-height: 50px;color: #ed4014;font-weight: 900;font-size: 32px;text-align: center;padding: 20px 0;display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-end;
justify-content: center;">
          <div style="display: inline-block;margin: 0 30px 0 0;">
            <div :style="{'color': selectData.color}">{{!!selectData.lv?selectData.lv:'--'}}</div>
            <div style="color: #000;font-size: 16px;font-weight: 300;">分档预测</div>
          </div>
          <span style="display: inline-block;width: 1px;height: 90px;background:#c5c5c5;"></span>
          <div style="display: inline-block;margin: 0 0 0 30px;">
            <div>{{!!selectData.score?selectData.score:0}}</div>
            <div style="color: #000;font-size: 16px;font-weight: 300;">评分预测</div>
          </div>


          <!--          <Row>-->
          <!--            <Col span="12">-->
          <!--              <div :style="{'color': selectData.color}">{{!!selectData.lv?selectData.lv:'&#45;&#45;'}}</div>-->
          <!--              <div style="color: #000;font-size: 16px;font-weight: 300;">分档预测</div>-->
          <!--            </Col>-->
          <!--            <Col span="12">-->
          <!--              <div>{{!!selectData.score?selectData.score:0}}</div>-->
          <!--              <div style="color: #000;font-size: 16px;font-weight: 300;">评分预测</div>-->
          <!--            </Col>-->
          <!--          </Row>-->


        </div>
        <div v-if="!!selectData.suggestContext" style="text-align: center;line-height: 40px;font-weight: 900;" :style="{'color': selectData.color}">{{selectData.suggestContext}}</div>
        <Collapse v-model="CollapseValue" style="margin:0 0 10px 0;">
          <Panel name="1">
            车辆风险分档（主要）
            <div slot="content">
              <Row :gutter="16">
                <i-col span="8">
                  <div class="_wz_vehicleStep" :class="!!selectData.insureModel?(selectData.insureModel.totalTranche == 'A' || selectData.insureModel.totalTranche == 'B' || selectData.insureModel.totalTranche == 'B+'?'_wz_success':(selectData.insureModel.totalTranche == 'B--'?'_wz_primary':(selectData.insureModel.totalTranche == 'C' || selectData.insureModel.totalTranche == 'D'?'_wz_warning':(selectData.insureModel.totalTranche == 'E'?'_wz_error':'')))):'_wz_disabled'">
                    <div class="_wz_vehicleStep_title">
                      <span>多</span>
                      <span>三者 + 车损险预测</span>
                    </div>
                    <div class="_wz_vehicleStep_step">
                      <span>{{!!selectData.insureModel?selectData.insureModel.totalTranche:'--'}}</span>
                      <span>分档预测</span>
                    </div>
                    <div class="_wz_vehicleStep_score">
                      <span>{{!!selectData.insureModel?selectData.insureModel.vehicleScore:'--'}}</span>
                      <span>评分预测</span>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                </i-col>
                <i-col span="8">
                  <div class="_wz_vehicleStep" :class="!!selectData.insureModel?(selectData.insureModel.compulsoryThreeTranche == 'A' || selectData.insureModel.compulsoryThreeTranche == 'B' || selectData.insureModel.compulsoryThreeTranche == 'B+'?'_wz_success':(selectData.insureModel.compulsoryThreeTranche == 'B--'?'_wz_primary':(selectData.insureModel.compulsoryThreeTranche == 'C' || selectData.insureModel.compulsoryThreeTranche == 'D'?'_wz_warning':(selectData.insureModel.compulsoryThreeTranche == 'E'?'_wz_error':'')))):'_wz_disabled'">
                    <div class="_wz_vehicleStep_title">
                      <span>多</span>
                      <span>交强 + 三者险预测</span>
                    </div>
                    <div class="_wz_vehicleStep_step">
                      <span>{{!!selectData.insureModel?selectData.insureModel.compulsoryThreeTranche:'--'}}</span>
                      <span>分档预测</span>
                    </div>
                    <div class="_wz_vehicleStep_score">
                      <span>{{!!selectData.insureModel?selectData.insureModel.compulsoryThreeScore:'--'}}</span>
                      <span>评分预测</span>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                </i-col>
              </Row>

              <Divider/>
              <Row :gutter="16">
                <i-col span="8">
                  <div class="_wz_vehicleStep" :class="!!selectData.insureModel?(selectData.insureModel.compulsoryTranche == 'A' || selectData.insureModel.compulsoryTranche == 'B' || selectData.insureModel.compulsoryTranche == 'B+'?'_wz_success':(selectData.insureModel.compulsoryTranche == 'B--'?'_wz_primary':(selectData.insureModel.compulsoryTranche == 'C' || selectData.insureModel.compulsoryTranche == 'D'?'_wz_warning':(selectData.insureModel.compulsoryTranche == 'E'?'_wz_error':'')))):'_wz_disabled'">
                    <div class="_wz_vehicleStep_title">
                      <span>强</span>
                      <span>交强险预测</span>
                    </div>
                    <div class="_wz_vehicleStep_step">
                      <span>{{!!selectData.insureModel?selectData.insureModel.compulsoryTranche:'--'}}</span>
                      <span>分档预测</span>
                    </div>
                    <div class="_wz_vehicleStep_score">
                      <span>{{!!selectData.insureModel?selectData.insureModel.compulsoryScore:'--'}}</span>
                      <span>评分预测</span>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                </i-col>
                <i-col span="8">
                  <div class="_wz_vehicleStep" :class="!!selectData.insureModel?(selectData.insureModel.vehicleDamageTranche == 'A' || selectData.insureModel.vehicleDamageTranche == 'B' || selectData.insureModel.vehicleDamageTranche == 'B+'?'_wz_success':(selectData.insureModel.vehicleDamageTranche == 'B--'?'_wz_primary':(selectData.insureModel.vehicleDamageTranche == 'C' || selectData.insureModel.vehicleDamageTranche == 'D'?'_wz_warning':(selectData.insureModel.vehicleDamageTranche == 'E'?'_wz_error':'')))):'_wz_disabled'">
                    <div class="_wz_vehicleStep_title">
                      <span>损</span>
                      <span>车损险预测</span>
                    </div>
                    <div class="_wz_vehicleStep_step">
                      <span>{{!!selectData.insureModel?selectData.insureModel.vehicleDamageTranche:'--'}}</span>
                      <span>分档预测</span>
                    </div>
                    <div class="_wz_vehicleStep_score">
                      <span>{{!!selectData.insureModel?selectData.insureModel.damageScore:'--'}}</span>
                      <span>评分预测</span>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                </i-col>
                <i-col span="8">
                  <div class="_wz_vehicleStep" :class="!!selectData.insureModel?(selectData.insureModel.threeTranche == 'A' || selectData.insureModel.threeTranche == 'B' || selectData.insureModel.threeTranche == 'B+'?'_wz_success':(selectData.insureModel.threeTranche == 'B--'?'_wz_primary':(selectData.insureModel.threeTranche == 'C' || selectData.insureModel.threeTranche == 'D'?'_wz_warning':(selectData.insureModel.threeTranche == 'E'?'_wz_error':'')))):'_wz_disabled'">
                    <div class="_wz_vehicleStep_title">
                      <span>三</span>
                      <span>三者险预测</span>
                    </div>
                    <div class="_wz_vehicleStep_step">
                      <span>{{!!selectData.insureModel?selectData.insureModel.threeTranche:'--'}}</span>
                      <span>分档预测</span>
                    </div>
                    <div class="_wz_vehicleStep_score">
                      <span>{{!!selectData.insureModel?selectData.insureModel.threeScore:'--'}}</span>
                      <span>评分预测</span>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                </i-col>
              </Row>
            </div>
          </Panel>
          <Panel name="2">
            车型风险分档（次要）
            <div slot="content">
              <Row :gutter="16">
                <i-col span="8">
                  <div class="_wz_vehicleStep" :class="!!selectData.insureModel?(selectData.insureModel.modelTotalTranche == 'A' || selectData.insureModel.modelTotalTranche == 'B' || selectData.insureModel.modelTotalTranche == 'B+'?'_wz_success':(selectData.insureModel.modelTotalTranche == 'B--'?'_wz_primary':(selectData.insureModel.modelTotalTranche == 'C' || selectData.insureModel.modelTotalTranche == 'D'?'_wz_warning':(selectData.insureModel.modelTotalTranche == 'E'?'_wz_error':'')))):'_wz_disabled'">
                    <div class="_wz_vehicleStep_title">
                      <span>多</span>
                      <span>三者 + 车损险预测</span>
                    </div>
                    <div class="_wz_vehicleStep_step">
                      <span>{{!!selectData.insureModel?selectData.insureModel.modelTotalTranche:'--'}}</span>
                      <span>分档预测</span>
                    </div>
                    <div class="_wz_vehicleStep_score">
                      <span>{{!!selectData.insureModel?selectData.insureModel.modelVehicleScore:'--'}}</span>
                      <span>评分预测</span>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                </i-col>
                <i-col span="8">
                  <div class="_wz_vehicleStep" :class="!!selectData.insureModel?(selectData.insureModel.modelCompulsoryThreeTranche == 'A' || selectData.insureModel.modelCompulsoryThreeTranche == 'B' || selectData.insureModel.modelCompulsoryThreeTranche == 'B+'?'_wz_success':(selectData.insureModel.modelCompulsoryThreeTranche == 'B--'?'_wz_primary':(selectData.insureModel.modelCompulsoryThreeTranche == 'C' || selectData.insureModel.modelCompulsoryThreeTranche == 'D'?'_wz_warning':(selectData.insureModel.modelCompulsoryThreeTranche == 'E'?'_wz_error':'')))):'_wz_disabled'">
                    <div class="_wz_vehicleStep_title">
                      <span>多</span>
                      <span>交强 + 三者险预测</span>
                    </div>
                    <div class="_wz_vehicleStep_step">
                      <span>{{!!selectData.insureModel?selectData.insureModel.modelCompulsoryThreeTranche:'--'}}</span>
                      <span>分档预测</span>
                    </div>
                    <div class="_wz_vehicleStep_score">
                      <span>{{!!selectData.insureModel?selectData.insureModel.modelCompulsoryThreeScore:'--'}}</span>
                      <span>评分预测</span>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                </i-col>
              </Row>
              <Divider/>
              <Row :gutter="16">
                <i-col span="8">
                  <div class="_wz_vehicleStep" :class="!!selectData.insureModel?(selectData.insureModel.modelCompulsoryTranche == 'A' || selectData.insureModel.modelCompulsoryTranche == 'B' || selectData.insureModel.modelCompulsoryTranche == 'B+'?'_wz_success':(selectData.insureModel.modelCompulsoryTranche == 'B--'?'_wz_primary':(selectData.insureModel.modelCompulsoryTranche == 'C' || selectData.insureModel.modelCompulsoryTranche == 'D'?'_wz_warning':(selectData.insureModel.modelCompulsoryTranche == 'E'?'_wz_error':'')))):'_wz_disabled'">
                    <div class="_wz_vehicleStep_title">
                      <span>强</span>
                      <span>交强险预测</span>
                    </div>
                    <div class="_wz_vehicleStep_step">
                      <span>{{!!selectData.insureModel?selectData.insureModel.modelCompulsoryTranche:'--'}}</span>
                      <span>分档预测</span>
                    </div>
                    <div class="_wz_vehicleStep_score">
                      <span>{{!!selectData.insureModel?selectData.insureModel.modelCompulsoryScore:'--'}}</span>
                      <span>评分预测</span>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                </i-col>
                <i-col span="8">
                  <div class="_wz_vehicleStep" :class="!!selectData.insureModel?(selectData.insureModel.modelVehicleDamageTranche == 'A' || selectData.insureModel.modelVehicleDamageTranche == 'B' || selectData.insureModel.modelVehicleDamageTranche == 'B+'?'_wz_success':(selectData.insureModel.modelVehicleDamageTranche == 'B--'?'_wz_primary':(selectData.insureModel.modelVehicleDamageTranche == 'C' || selectData.insureModel.modelVehicleDamageTranche == 'D'?'_wz_warning':(selectData.insureModel.modelVehicleDamageTranche == 'E'?'_wz_error':'')))):'_wz_disabled'">
                    <div class="_wz_vehicleStep_title">
                      <span>损</span>
                      <span>车损险预测</span>
                    </div>
                    <div class="_wz_vehicleStep_step">
                      <span>{{!!selectData.insureModel?selectData.insureModel.modelVehicleDamageTranche:'--'}}</span>
                      <span>分档预测</span>
                    </div>
                    <div class="_wz_vehicleStep_score">
                      <span>{{!!selectData.insureModel?selectData.insureModel.modelDamageScore:'--'}}</span>
                      <span>评分预测</span>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                </i-col>
                <i-col span="8">
                  <div class="_wz_vehicleStep" :class="!!selectData.insureModel?(selectData.insureModel.modelThreeTranche == 'A' || selectData.insureModel.modelThreeTranche == 'B' || selectData.insureModel.modelThreeTranche == 'B+'?'_wz_success':(selectData.insureModel.modelThreeTranche == 'B--'?'_wz_primary':(selectData.insureModel.modelThreeTranche == 'C' || selectData.insureModel.modelThreeTranche == 'D'?'_wz_warning':(selectData.insureModel.modelThreeTranche == 'E'?'_wz_error':'')))):'_wz_disabled'">
                    <div class="_wz_vehicleStep_title">
                      <span>三</span>
                      <span>三者险预测</span>
                    </div>
                    <div class="_wz_vehicleStep_step">
                      <span>{{!!selectData.insureModel?selectData.insureModel.modelThreeTranche:'--'}}</span>
                      <span>分档预测</span>
                    </div>
                    <div class="_wz_vehicleStep_score">
                      <span>{{!!selectData.insureModel?selectData.insureModel.modelThreeScore:'--'}}</span>
                      <span>评分预测</span>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                </i-col>
              </Row>
            </div>
          </Panel>
          <Panel name="4">
            车辆评估
            <div class="_wz_factorList"  slot="content">
              <Card dis-hover :bordered="true" style="margin:0 0 10px;">
                <div slot="title">运营风险</div>
                <template v-if="!!selectData.divisorList">
                  <Row style="display: flex;flex-flow: row wrap;">
                    <template v-for="item in selectData.divisorList">
                      <i-col span="4" v-if="item.type == 1">
                        <div class="_wz_factor">
                          <span>{{!!item.name?item.name:'--'}}</span>
                          <span :style="{'color': item.color}" style="font-weight: 900;">{{!!item.value?item.value:'--'}}</span>
                        </div>
                      </i-col>
                    </template>
                  </Row>
                </template>
                <div v-else>暂无数据</div>
              </Card>
              <Card dis-hover :bordered="true" style="margin:0 0 10px;">
                <div slot="title">驾驶风险</div>
                <template v-if="!!selectData.divisorList">
                  <Row style="display: flex;flex-flow: row wrap;">
                    <template v-for="item in selectData.divisorList">
                      <i-col span="4" v-if="item.type == 2">
                        <div class="_wz_factor">
                          <span>{{!!item.name?item.name:'--'}}</span>
                          <span :style="{'color': item.color}" style="font-weight: 900;">{{!!item.value?item.value:'--'}}</span>
                        </div>
                      </i-col>
                    </template>
                  </Row>
                </template>
                <div v-else>暂无数据</div>
              </Card>
              <Card dis-hover :bordered="true" style="margin:0 0 10px;">
                <div slot="title">其它风险</div>
                <template v-if="!!selectData.divisorList">
                  <Row style="display: flex;flex-flow: row wrap;">
                    <template v-for="item in selectData.divisorList">
                      <i-col span="4" v-if="item.type == 3">
                        <div class="_wz_factor">
                          <span>{{!!item.name?item.name:'--'}}</span>
                          <span :style="{'color': item.color}" style="font-weight: 900;">{{!!item.value?item.value:'--'}}</span>
                        </div>
                      </i-col>
                    </template>
                  </Row>
                </template>
                <div v-else>暂无数据</div>
              </Card>
            </div>
          </Panel>

          <Panel name="5">
            改善建议
            <div class="_wz_factorList"  slot="content">
              <div class="ivu-form-item" v-if="drivingRisk.length > 0">
                <label class="ivu-form-item-label" style="width: 90px;color: #ed4014;font-weight: 900;">改善建议</label>
                <div class="ivu-form-item-content" style="margin-left: 90px;">
                  <template v-for="item,index in drivingRisk">
                    <div style="color: #ed4014;line-height: 30px;font-weight: 900;">
                      {{index+1}}.{{item.suggest}}
                    </div>
                  </template>
                </div>
              </div>
              <div v-else style="color: #2d8cf0;line-height: 30px;font-weight: 900;">您的表现良好，请继续保持</div>
            </div>
          </Panel>
        </Collapse>
        <div v-if="!!selectData.insureContext" style="line-height: 30px;font-weight: 900;padding: 10px;">
          适用保险公司：{{selectData.insureContext}}
        </div>
      </div>
    </Form>
  </div>
</template>
<script>
export default {
  props: ['selectData'],//接收来自父组件的数据
  data() {
    return {
      CollapseValue:['1','2','4','5'],
      formData:{//检索
        vehicleEngineNo:'',
        frameNo:'',
      },
      operationalRisk:[],//运营风险 1
      drivingRisk:[],//驾驶风险 2
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    if(!!that.selectData.divisorList){
      that.selectData.divisorList.forEach(function (k, i) {

        if(!!k.suggest && k.type == 1){
          that.operationalRisk.push(k)
        }
        if(!!k.suggest && k.type == 2){
          that.drivingRisk.push(k)
        }
      })
    }
  },
  methods: {//执行的方法

  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_vehicleQueryUbiSee{
  ._wz_ztList_cont_span {
    line-height: 30px;
    color: #ababab;

    span {
      margin: 0 10px 0 0;
      color: #01AAED;
      word-break: break-all;
    }
  }
  ._wz_vehicleStep{
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    color: #8a8989;
    ._wz_vehicleStep_title{
      float: left;
      width: 45%;
      background: #2db7f5;
      padding: 10px;
      span{
        display: block;
        color: #fff;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      span:first-child{
        background: url("../../../assets/dp.png") no-repeat;
        background-size: 30%;
        background-position: center;
        color: #2db7f5;
        height: 50px;
        line-height: 50px;
      }

    }
    ._wz_vehicleStep_step{
      float: left;
      width: 25%;
      padding: 10px;
      border: 1px solid #edeff0;
      border-left: 0px;
      border-right: 0px;
      span{
        display: block;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      span:first-child{
        font-size: 20px;
        height: 50px;
        line-height: 50px;

      }

    }
    ._wz_vehicleStep_score{
      float: left;
      width: 30%;
      padding: 10px;
      border: 1px solid #edeff0;
      span{
        display: block;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      span:first-child{
        font-size: 20px;
        height: 50px;
        line-height: 50px;
      }

    }
  }
  ._wz_success {
    ._wz_vehicleStep_title{
      background: #19be6b;
      span:first-child{
        color: #19be6b;
      }
    }
    ._wz_vehicleStep_step span:first-child{
      color: #19be6b;
    }
    ._wz_vehicleStep_score span:first-child{
      color: #19be6b;
    }
  }
  ._wz_primary {
    ._wz_vehicleStep_title{
      background: #2d8cf0;
      span:first-child{
        color: #2d8cf0;
      }
    }
    ._wz_vehicleStep_step span:first-child{
      color: #2d8cf0;
    }
    ._wz_vehicleStep_score span:first-child{
      color: #2d8cf0;
    }

  }
  ._wz_warning {
    ._wz_vehicleStep_title{
      background: #ff9900;
      span:first-child{
        color: #ff9900;
      }
    }
    ._wz_vehicleStep_step span:first-child{
      color: #ff9900;
    }
    ._wz_vehicleStep_score span:first-child{
      color: #ff9900;
    }

  }
  ._wz_error {
    ._wz_vehicleStep_title{
      background: #ed4014;
      span:first-child{
        color: #ed4014;
      }
    }
    ._wz_vehicleStep_step span:first-child{
      color: #ed4014;
    }
    ._wz_vehicleStep_score span:first-child{
      color: #ed4014;
    }

  }
  ._wz_disabled{
    ._wz_vehicleStep_title{
      background: #c5c8ce;
      span:first-child{
        color: #c5c8ce;
      }
    }
    ._wz_vehicleStep_step span:first-child{
      color: #c5c8ce;
    }
    ._wz_vehicleStep_score span:first-child{
      color: #c5c8ce;
    }

  }

  ._wz_factorList{
    ._wz_factor{
      padding: 10px 30px;
      line-height: 30px;
      text-align: center;
      span{
        display: block;
      }
    }
    .ivu-col-span-4{
      border-bottom: 1px solid #edeff0;
    }
  }


}

</style>
